<template>
<div>
  <NavBar>
  <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">历史浏览记录</div>
</NavBar>

  <div>
    <van-row v-for="item in skus" class="fenge" :key="item.id" @click="itemclick(item.id)">
  <van-col span="8">
    <div class="image"><img :src="'/api/'+item.default_image_url"></div>
  </van-col>
  <van-col span="16">
  <div class="image"><div class="named">{{item.name|ellipsis}}</div>
  <div> <span class="similar-product-price" >¥<span class="price">{{item.price}}</span></span></div></div>

  </van-col>
</van-row>
  </div>
</div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import {get_history_goods} from "@/network/Users/get_goodhistory";

export default {
name: "History",
  components:{NavBar},
  data(){
  return{
    skus:[]
  }
  },
  methods:{
   return_before(){
    history.go(-1)
  },
    unique (arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
  itemclick(id){
    this.$router.push('/detail/'+id)
  }
  },
  computed:{


  },
  created() {
  get_history_goods().then(
      res=>{
        let newlist=this.unique(res.skus)
        this.skus=newlist;
        console.log(newlist);
      }
  )
  },
 filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 25) {
        return value.slice(0,25) + '...'
      }
      return value
    }
}}

</script>

<style scoped>
.image{
  height: 130px;
  width: 120px;
}
img{
  height: 130px;
  width: 130px;
}
.fenge{
  margin-top: 10px;
  margin-left: 2px;
}
.named{
  width: 200px;
  margin-left: 18px;
  font-size: 14px;
  color: #262626;
}
.similar-product-price{
  font-family: Arial;
  color: #fa2c19;
  font-size:12px;
  margin-left: 18px;
  margin-top: 77px;
  display: block;
}
.price{
  font-size: 18px;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
img{
  border-radius: 14px;
}
</style>